<template>
    <div class="login">
        <div class="login-left">
            <img src="../assets/logo.png" class="content-img">
            <div class="ad-content">

                <img src="../assets/loginBg.png" class="ad-content-img">
                <div class="content-title">麻袋船长Whatsapp</div>
                <div class="content-text">{{ $t('message.advertisingWords') }}</div>
            </div>
        </div>

        <div class="login-right">

            <div class="login-form">
                <div style="margin-bottom: 80px;">
                   <div style="margin-bottom: 30px;">
                    <a-select ref="select" v-model:value="value1" style="width: 80px" @focus="focus"
                    @change="handleChange">
                    <a-select-option value="chinese">中文</a-select-option>
                    <a-select-option value="english">英文</a-select-option>
                </a-select>
                   </div>
                    <div class="login-form-title">麻袋船长Whatsapp</div>
                    <div class="login-form-text">{{ $t('message.welcome') }}</div>
                </div>
                <a-input v-model:value="account" placeholder="用户名" />
                <a-input v-model:value="password" type="password" placeholder="密码" style="margin-top: 20px;" />
                <a-checkbox v-model:value="checked" style="margin: 20px 0;" >
                    {{ $t('message.remenber') }}
                </a-checkbox>
                <a-button type="primary" style="width: 100%;height:50px;background:#25d466;"
                @click="login">{{ $t('message.login') }}</a-button>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import requests from '../utils/requests';
const account = ref('');
const password = ref('');
const checked = ref(false);
import { encryptPassword } from '../utils/crypto';

export default {
    data() {
        return {
            value1: 'chinese',
            grantType: 'password',
        }
    },
    mounted() {
        // 页面加载时检查是否有保存的账号密码
        const savedAccount = localStorage.getItem('savedAccount');
        const savedPassword = localStorage.getItem('savedPassword');
        const rememberMe = localStorage.getItem('rememberMe');
        
        if (rememberMe === 'true' && savedAccount && savedPassword) {
            this.account = savedAccount;
            this.password = savedPassword;
            this.checked = true;
        }
    },
    methods: {
        async login() {
            try {
                // 加密密码
                const encryptedPwd = encryptPassword(this.password);
                // 发送登录请求
                const response = await requests.post('/api/externalSysAuth/login', {
                    account: this.account,
                    password: encryptedPwd,
                    grantType: this.grantType
                });
                
                // 处理登录成功逻辑
                if(response.data.code === 200) {
                    // 如果选择了记住密码，保存账号密码
                    if (this.checked) {
                        localStorage.setItem('savedAccount', this.account);
                        localStorage.setItem('savedPassword', this.password);
                        localStorage.setItem('rememberMe', 'true');
                    } else {
                        // 如果没有选择记住密码，清除保存的账号密码
                        localStorage.removeItem('savedAccount');
                        localStorage.removeItem('savedPassword');
                        localStorage.removeItem('rememberMe');
                    }
                    
                    localStorage.setItem('accessToken', 'Bearer ' + response.data.result.accessToken);
                    this.$router.push('/layout');
                    this.$message.success('登录成功');
                }
            } catch (error) {
                this.$message.error('登录失败');
            }
        },
        handleChange(value) {
         if (value === 'chinese') {
            this.$i18n.locale = 'zh'; // 设置为中文
            this.$message.success('切换到中文'); 
         }else if (value === 'english') {
            this.$i18n.locale = 'en'; // 设置为英文
            this.$message.success('Switch to English');
         }
        },
    },
}
</script>

<style scoped>
.login {
    width: 100%;
    height: 100vh;
    display: flex;
}

.login-left,
.login-right {
    flex: 1;
    height: 100%;
}

.login-left {
    background: linear-gradient(154deg, #d5f7df 30%, hsl(120deg 100% 50% / 30%) 48%, #f6fff2 64%) !important;
    position: relative;
}

.ad-content {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
}

.ad-content-img {
    width: 920px;
    height: 800px;
}

.content-img {
    width: 30px;
    height: 30px;
    position: relative;
    top: 10px;
    left: 10px
}

.content-title {
    color: #333;
    font-size: 20px;
    font-weight: 700;
    margin-right: 75%;
    margin-top: 5%;
}

.content-text {
    color: #999;
    font-weight: 400;
    line-height: 23px;
    margin-top: 5%;
    margin-left: 20px;
    text-align: left;
}

.ad-title {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
}

.login-right {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 0 5%;
}

.login-form {
    width: 80%;
    max-width: 400px;
}

.login-form-title {
    color: #25d466;
    line-height: 2rem;
    font-weight: 700;
    font-size: 40px;
    letter-spacing: 6px;
    margin-bottom: 14px;
    white-space: nowrap;
}

.login-form-text {
    box-sizing: border-box;
    border-color: hsl(var(--border));
    border-style: solid;
    border-width: 0px;
    color: rgb(126, 137, 158);
    font-size: 20px;

}
</style>